{#
<!--
   MyData pagination (Nunjucks template: https://mozilla.github.io/nunjucks/templating.html
-->
#}
<div class="row">
    <div class="col-xs-12 col-md-3">
        <br />
        {% if numResults > 1 %}
            Found: <b>{{ numResultsString }} results</b>
        
        {% elif numResults == 1 %}
        Found: <b>1 result</b>
        
        {% endif %}
        {% if endCardNumber > startCardNumber  %}
        <br />Displaying: <b>{{ startCardNumberString }} to {{ endCardNumberString }}</b>
        {% endif %}
        <br />
    </div>
    <div class="col-xs-12 col-md-9">
    {% if isNecessary %}
        <ul class="pagination">
        <!-- first page | previous page -->
        {% if hasPreviousPageNumber %}
            <li><a aria-label="First" class="page_link" rel="1"><span aria-hidden="true">&lt;&lt;</span></a></li>
            <li><a aria-label="Previous" class="page_link" rel="{{ previousPageNumber }}"><span aria-hidden="true">&lt; Previous</span></a></li>
        {% else %}
            <li class="disabled"><a aria-label="First"><span aria-hidden="true">&lt;&lt;</span></a></li>
            <li class="disabled"><a aria-label="Previous"><span aria-hidden="true">&lt; Previous</span></a></li>
        {% endif %}
        
        <!-- page numbers -->
        {% for pg in pageNumberList -%}
            {% if pg == selectedPageNumber %}
                <li class="active"><a rel="{{ pg }}" class="page_link">{{ pg }}</a></li>
            {% else %}
                <li><a rel="{{ pg }}" href="#" class="page_link">{{ pg }}</a></li>
            {% endif %}
        {%- endfor %}

        <!-- next page | last page -->
        {% if hasNextPageNumber %}
            <li><a href="#" aria-label="Next" class="page_link" rel="{{ nextPageNumber }}"><span aria-hidden="true">Next &gt;</span></a></li>
            <li><a href="#" aria-label="Last" class="page_link" rel="{{ pageCount }}"><span aria-hidden="true">&gt;&gt;</span></a></li>
        {% else %}
            <li class="disabled"><a href="#" aria-label="Next"><span aria-hidden="true">Next &gt;</span></a></li>
            <li class="disabled"><a href="#" aria-label="Last"><span aria-hidden="true">&gt;&gt;</span></a></li>
        {% endif %}    
        </ul>
    {% endif %}
    </div>
</div>
